<template>
  <div class="container" :style="{ height: contentHeight }">
    <div class="comment" v-for="(item, index) in commentList" :key="index">
      <div class="left">
        <el-avatar size="small">{{ item.ReplyerName.slice(0, 1) }}</el-avatar>
      </div>
      <div class="right">
        <div class="top">
          <div v-if="item.ReplyerName" class="name">{{ item.ReplyerName }}</div>
          <div v-else class="name">匿名</div>
        </div>
        <div class="content">{{ item.Replycontent }}</div>
        <div class="bottom">
          {{ item.ReplyTime }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getReplay } from "@/api/common";
export default {
  name: "RelativeReview",

  data() {
    return {
      commentList: [],
    };
  },

  computed: {
    contentHeight() {
      if (this.height == 0) {
        return document.documentElement.clientHeight - 280 + "px";
      } else {
        return document.documentElement.clientHeight - 280 + this.height + "px";
      }
    },
  },

  props: {
    /** 任务ID */
    id: [String, Number],
    /**高度 */
    height: { type: [Number], default: 0 },
  },

  mounted() {},

  watch: {
    id: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.getList(newVal);
        }
      },
      deep: true,
      immediate: true,
    },
  },

  methods: {
    getList(id) {
      getReplay({ dutyid: id }).then((res) => {
        this.commentList = res.Data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  overflow-y: auto;
  // background-color: #f5f5f5;

  .u-bottom-box {
    text-align: center;
    background-color: #2e0be2;
    color: #f5f5f5;
    padding: 10px 20px;
  }

  .comment {
    display: flex;
    padding: 30px;

    .left {
      image {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background-color: #f2f2f2;
        color: #ffffff;
      }
    }

    .right {
      flex: 1;
      padding-left: 10px;
      font-size: 13px;

      .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;

        .name {
          color: #2e0be2;
          font-size: 14px;
        }

        .like {
          display: flex;
          align-items: center;
          color: #9a9a9a;
          font-size: 13px;
        }

        .highlight {
          color: #2e0be2;

          .num {
            color: #2e0be2;
          }
        }
      }

      .content {
        margin-bottom: 10px;
        font-size: 13px;
      }

      .reply-box {
        background-color: rgb(242, 242, 242);
        border-radius: 12px;

        .item {
          padding: 20px;
          border-bottom: 1px solid #e4e7ed;

          .username {
            font-size: 13px;
            color: #999999;
          }

          .text {
            font-size: 13px;
          }
        }
      }

      .bottom {
        margin-top: 10px;
        display: flex;
        font-size: 14px;
        color: #9a9a9a;

        .reply {
          color: #2e0be2;
          margin-left: 10px;
        }
      }
    }
  }

  .btn {
    background-color: #2e0be2;
    color: #ffffff;
    border-radius: 10rpx;
    font-size: 26rpx;
  }
}
</style>